<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-col :span="10">
					<el-form-item label="姓名" prop="xm" >
						<el-input v-model="dataForm.xm" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="性别" prop="xb" >
						<el-radio-group v-model="dataForm.xb" :style='{}' >
							<el-radio v-for="(item, index) in xbOptions" :key="index" :label="item.id"  >{{item.fullName}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="人员类型" prop="rylx" >
						<el-select v-model="dataForm.rylx" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in rylxOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="民族" prop="mz" >
						<el-select filterable v-model="dataForm.mz" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in mzOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="联系电话" prop="lxdh" >
						<el-input v-model="dataForm.lxdh" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="健康状况" prop="jkzk" >
						<el-input v-model="dataForm.jkzk" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="最高学历" prop="zgxl" >
						<el-input v-model="dataForm.zgxl" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="专业" prop="zy" >
						<el-input v-model="dataForm.zy" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="毕业院校" prop="byyx" >
						<el-input v-model="dataForm.byyx" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="证件类型" prop="zjlx" >
						<el-select v-model="dataForm.zjlx" placeholder="请选择" clearable :style='{"width":"100%"}' >
							<el-option v-for="(item, index) in zjlxOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="证件号码" prop="zjhm" >
						<el-input v-model="dataForm.zjhm" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="参加工作时间" prop="cjgzsj" >
						<el-date-picker v-model="dataForm.cjgzsj" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="邮政编码" prop="yzbm" >
						<el-input v-model="dataForm.yzbm" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="工作单位" prop="gzdw" >
						<el-input v-model="dataForm.gzdw" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="20">
					<el-form-item label="工作简历" prop="gzjl" >
						<el-input v-model="dataForm.gzjl" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":4}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="户籍所在地" prop="hjszd" >
						<el-input v-model="dataForm.hjszd" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="从业所在地" prop="cyszd" >
						<el-input v-model="dataForm.cyszd" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="资格证书类型" prop="zgzslx" >
						<el-input v-model="dataForm.zgzslx" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="证书编号" prop="zsbh" >
						<el-input v-model="dataForm.zsbh" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="证书有效期起" prop="zsyxqq" >
						<el-date-picker v-model="dataForm.zsyxqq" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="证书有效期止" prop="zsyxqz" >
						<el-date-picker v-model="dataForm.zsyxqz" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="20">
					<el-form-item label="证书上传" prop="zssc" >
						<JNPF-UploadFz v-model="zsscList" accept="" :fileSize="20" sizeUnit="MB" :limit="9" buttonText="点击上传" >
						</JNPF-UploadFz>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="备注" prop="bz" >
						<el-input v-model="dataForm.bz" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
							<template slot="prepend"></template>
							<template slot="append"></template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="排序" prop="px" required >
						<el-input-number v-model="dataForm.px" placeholder="数字文本" :step="1" controls-position="" >
						</el-input-number>
					</el-form-item>
				</el-col>
			</el-form>
			</el-row>
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
    data() {
      return {
        visible: false,
        isDetail: false,
        dataForm: {
					xm:undefined,
					xb:undefined,
					rylx:undefined,
					mz:undefined,
					lxdh:undefined,
					jkzk:undefined,
					zgxl:undefined,
					zy:undefined,
					byyx:undefined,
					zjlx:undefined,
					zjhm:undefined,
					cjgzsj:undefined,
					yzbm:undefined,
					gzdw:undefined,
					gzjl:undefined,
					hjszd:undefined,
					cyszd:undefined,
					zgzslx:undefined,
					zsbh:undefined,
					zsyxqq:undefined,
					zsyxqz:undefined,
					zssc:[],
					bz:undefined,
					px:undefined,

        },
        rules: {
						px:[
						{
							required:true,
							message:'请输入排序',
							trigger:'blur'
						},
						],

        },
				xbOptions:[{"fullName":"男","id":"1"},{"fullName":"女","id":"2"}],
				rylxOptions:[{"fullName":"分管领导","id":"1"},{"fullName":"带班领导","id":"2"},{"fullName":"安全总监","id":"3"},{"fullName":"安全管理部门负责人","id":"4"},{"fullName":"车间主任","id":"5"},{"fullName":"安全管理人员","id":"6"},{"fullName":"特种作业人员","id":"7"},{"fullName":"外来作业人员","id":"8"},{"fullName":"承包商","id":"9"}],
				// mzOptions:[{"fullName":"汉族","id":"1"},{"fullName":"回族","id":"2"},{"fullName":"维吾尔族","id":"3"},{"fullName":"藏族","id":"4"}],
				mzOptions:[],
				zjlxOptions:[{"fullName":"居民身份证","id":"1"},{"fullName":"军人证","id":"2"},{"fullName":"港澳台居民身份证","id":"3"},{"fullName":"华侨身份证","id":"4"},{"fullName":"外籍护照","id":"5"},{"fullName":"其他","id":"6"}],

					zsscList:[],

      }
    },
    created() {

    },
    methods: {

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
		  // 获取民族
			this.$store.dispatch('base/getDictionaryData', { sort: 'Nation' }).then(res => {
				this.mzOptions = res
			})
          if (this.dataForm.id) {
            request({
              url: '/api/system/qyscXgry/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;
				this.zsscList = this.dataForm.zssc ? JSON.parse(this.dataForm.zssc) : [];

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
				this.$set(this.dataForm, 'zssc', JSON.stringify(this.zsscList));

        this.$refs['elForm'].validate((valid) => {
          if (valid) {
            if (!this.dataForm.id) {
              request({
                url: '/api/system/qyscXgry',
                method: 'post',
                data: this.dataForm,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/system/qyscXgry/' + this.dataForm.id,
                method: 'PUT',
                data: this.dataForm
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },

    }
  }
  </script>